import React from 'react';
import { Home, ChevronRight } from 'lucide-react';

const Breadcrumb = ({ path, onPathClick }) => {
  return (
    <div className="flex items-center space-x-2 text-sm">
      <button
        onClick={() => onPathClick(0)}
        className="flex items-center space-x-1 text-material-grey-600 hover:text-primary transition-colors"
      >
        <Home className="w-4 h-4" />
        <span>首页</span>
      </button>

      {path.map((segment, index) => (
        <React.Fragment key={index}>
          <ChevronRight className="w-4 h-4 text-material-grey-400" />
          <button
            onClick={() => onPathClick(index)}
            className={`transition-colors ${
              index === path.length - 1
                ? 'text-material-grey-800 font-medium'
                : 'text-material-grey-600 hover:text-primary'
            }`}
          >
            {segment}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
};

export default Breadcrumb;
